<template>
	<view class="container" >
		<!-- 小程序头部兼容 -->
		<!-- #ifdef MP -->
		<view class="mp-search-box">
			<input class="ser-input" type="text" value="输入关键字搜索" disabled />
		</view>
		<!-- #endif -->
		
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<!-- 标题栏和状态栏占位符 -->
			<!-- <view class="titleNview-placing"></view> -->
			<!-- 背景色区域 -->
			<view class="titleNview-background"  :style="{backgroundColor:titleNViewBackground}"></view>
			<swiper class="carousel"  circular @change="swiperChange" indicator-dots="true" autoplay="autoplay" :interval="interval" :duration="duration" >
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToDetailPage1(item)" >
					<image :src="img+item.THUMB"  mode="aspectFill"/>
				</swiper-item>
			</swiper>
		</view>
		<!-- 分类 -->
		<!-- <view class="cate-section1">
			<view class="cate-item" @click="navToGroupBuyPage()">
				<image src="/static/temp/xxxiaoxi.png" ></image>
				<text>团购</text>
			</view>
			<view class="cate-item" @click="navToBestPage()">
				<image src="/static/temp/youxuan.png" ></image>
				<text>优选</text>
			</view>
			<view class="cate-item" @click="navToTehuiPage()">
				<image src="/static/temp/tttuangou.png"></image>
				<text>预购</text>
			</view>
			<view class="cate-item" @click="navToQiandaoPage()">
				<image src="/static/temp/qqqiandao.png"></image>
				<text>签到</text>
			</view>
		</view> -->
		
		<!-- 动态文字 -->
		<view class="uni-swiper-msg">
			<view class="uni-swiper-msg-icon un-yticon">
				<uni-icons type="sound" color="#FF0000" size="20" ></uni-icons>
			</view>
			<swiper vertical="true" autoplay="true" circular="true" interval="3000">
				<swiper-item v-for="(item, index) in newsList" :key="index">
					<navigator class="un-gun">{{item.DESCRIBE}}</navigator>
					<text class="un-xiang" @click="navToNewsDetailPage(item)">详情</text>
				</swiper-item>
			</swiper>
			
		</view>
		
		
		<!-- 品牌直供 -->
		<!-- <view class="f-header m-t" @click="navToBrandPage()">
			<view class="tit-box">
				<text class="tit">品牌直供</text>
			</view>
			<text class="tit2">更多推荐</text>
			<text class="iconfont1 iconfont  icon-you1"></text>
		</view> -->
		<!-- <view class="brand-section">
			<view 
				v-for="(item, index) in brandList" :key="index"
				class="guess-item"
				@click="navToDetailPage(item)"
			>
				<text class="title clamp">{{item.brand}}</text>
				<text class="price">{{item.price}}元起</text>
				<view class="un-huangtuoyuan">
					<text >上新</text>
				</view>
				<view class="image-wrapper">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
			</view>
		</view> -->
		
		<!-- 秒杀楼层 -->
		<!-- <view class="seckill-section m-t">
			<view class="s-header m-t" @click="navToseckillPage()">
				<view class="tit-box" >
					<text class="tit">秒杀专区</text>
				</view>
				<text class="tit2 un-you">本场结束剩余</text>
			</view>
			<view class="s-header m-t" @click="navToseckillPage(item)">
				<view class="tit-box">
					<text class="tit2" >下一场 {{time*2+2}}:00 开始</text>
				</view>
				<view class="un-you2" >
					<uni-countdown :day="0" :hour="hour" :minute="minute" :second="second" color="#FFFFFF" background-color="#3C3C3C" border-color="#3C3C3C" :showDay="false"/>
				</view>
			</view>
			<view class="un-seckill-section"> -->
				<!-- 空白页 -->
				<!-- <view v-if="spikeList.length===0" class="empty" style="margin-left: 200upx;">
					<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
					<view class="empty-tips">此时段暂无秒杀商品</view>
				</view>
				
				<view v-else
					v-for="(item, index) in spikeList" :key="index"
					class="guess-item"
					@click="navToDetailPagespike(item)"
				>
					<view style="position: relative;" v-if="index<4">
						<view class="un-hongyuan">
							<text class="m-price">￥{{item.SALEPRICE}}</text>
						</view>
						
						<view class="image-wrapper">
							<image :src="img+item.THUMB" mode="aspectFill"></image>
						</view>
					</view>
					
					<text class="price">秒杀价 ￥{{item.SPIKEPRICE}}</text>
					<text class="title clamp">{{item.NAME}}</text>
					<text class="tit2 title2 clamp">{{item.SHORTINFO}}</text>
				</view>
			</view>
		</view> -->
		
		<!-- 新鲜好物 -->
		
		<view  class="new-section m-t" v-for="(item1, index1) in titleList" :key="index1" >
			<view class="s-header m-t" @click="navToNewproductPage(item1.TITLE,item1.ID)">
				<view class="tit-box" >
					<text class="tit">{{item1.TITLE}}</text>
				</view>
				<text class="tit2" >更多好物</text>
				<text class="iconfont1 iconfont  icon-you1"></text>
			</view>
			<scroll-view class="floor-list" scroll-x>
				
				<view v-if="item1.freshList&&item1.freshList.length>0" class="scoll-wrapper">
					<view 
						v-for="(item, index) in item1.freshList" :key="index"
						class="floor-item"
						@click="navToDetailPage(item)"
					>
						<view class="un-left" >
							<view class="un-huangtuoyuan">
								<text class="m-price">{{item.MARKETPRICE}}元</text>
							</view>
							<image :src="img+item.THUMB" mode="aspectFill"></image>
						</view>
						
						<text class="title clamp">{{item.NAME}}</text>
						<text class="tit2 title2 clamp">{{item.SHORTINFO}}</text>
						<view class="" v-if="item.MULTIPAY==2" >
							<view class="price" v-if="item.OPPOINT>0">{{item.OPPOINT}}积分</view>
							<view class="price" v-if="item.OPDEDU>0">{{item.OPDEDU}}抵扣券</view>
							<view class="price" v-if="item.OPCOUPON>0">{{item.OPCOUPON}}优惠券</view>
						</view>
						<view class="" v-else style="display: flex;">
							<view class="price"  v-if="item.MUCHSELLERPRICE>0">{{item.MUCHSELLERPRICE}}元</view>
							<view class="price" v-if="item.MPPOINT>0">+{{item.MPPOINT}}积分</view>
							<view class="price" v-if="item.MPDEDU>0">+{{item.MPDEDU}}抵扣券</view>
							<view class="price" v-if="item.MPCOUPON>0">+{{item.MPCOUPON}}优惠券</view>
						</view>
					</view>
					<!-- <view v-if="freshList.length!==0" class="more" @click="navToNewproductPage()">
						<text>查看全部</text>
						<text>More+</text>
					</view> -->
				</view>
				<view v-else class="un-zanwu">暂无数据</view>
			</scroll-view>
			
		</view>
			<!-- 专题精选 -->
		<!-- <view class="f-header m-t" @click="navToSpecialPage()">
			<view class="tit-box">
				<text class="tit">{{titleList2}}</text>
			</view>
			<text class="tit2">更多专题</text>
			<text class="iconfont1 iconfont  icon-you1"></text>
		</view> -->
		
		<!-- 空白页 -->
		<!-- <view v-if="popList.length===0" class="empty" >
			<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
			<view class="empty-tips">暂无数据</view>
		</view>
		<view v-else class="zhuan-section">
			<swiper class="g-swiper" :duration="500">
				<swiper-item
					class="g-swiper-item"
					v-for="(item, index) in popList" :key="index"
					@click="navToDetailPage(item)"
				>
					<view class="g-item">
						<view class="un-image">
							<image :src="img+item.THUMB" mode="aspectFill"></image>
						</view>
						
						<view class="t-box">
								<view class="col-4">
									<text class="title un-clamp">{{item.NAME}}</text>
									<text class="price right">{{item.SALEPRICE}}元起</text>
								</view> 
								<text class="tit2 title2 ">{{item.SHORTINFO}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view> -->
		
		
		
	
		<!-- 猜你喜欢 -->
		<!-- <view class="f-header m-t">
			<view class="tit-box">
				<text class="tit">猜你喜欢</text>
			</view>
		</view>
		<view class="guess-section">
			<view  style="color: #CCCCCC;text-align: center;width: 100%;height: 500upx;line-height: 500upx;font-size: 32upx;"> 暂无数据</view>
			 -->
			<!-- <view 
				v-for="(item, index) in goodsList" :key="index"
				class="guess-item"
				@click="navToDetailPage(item)"
			>
				<view class="image-wrapper">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<text class="title clamp">{{item.title}}</text>
				<text class="tit2 title2 clamp">{{item.title2}}</text>
				<text class="price">￥{{item.price}}</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	import uniTag from "@/components/uni-tag/uni-tag.vue"
	import uniBadge from '@/components/uni-badge/uni-badge.vue';
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
	export default {
		components: {
			uniNoticeBar,
			uniTag,
			uniBadge,
			uniIcons,
			uniCountdown
		},
		data() {
			return {
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				goodsList: [],
				brandList: [],
				interval:2000,
				duration:500,
				spikeList:[],
				time:0,
				img:'',
				hour: '',
				minute : '',
				second: '',
				// freshList:[],
				// popularList:[],
				// popList:[],
				titleList: [],
				// titleList1:'',
				// titleList2:'',
				// titleList3:'',
				newsList:[],
			};
		},
		
		onLoad() {
		
			uni.showLoading({
				title: 'loading'
			})
			
			this.img = getApp().globalData.imageAddress
			if(uni.getStorageSync("SIGNATURE")){
				this.loadData();
				this.loadspike();
				this.loadcarouselList();
				this.loadnews();
			}else{
				uni.request({
					url: getApp().globalData.http+'/common/regist', //仅为示例，并非真实接口地址。
					data: {
						BRAND : this.BRAND,
						MODEL : this.MODEL,
						OS : this.OS,
						OSVERSION: this.OSVERSION,
						SCREEN: this.SCREEN,
						RESOLUTION: this.RESOLUTION,
						MIDU: this.MIDU,
						UQID: this.UQID,
						OSID: this.OSID,
						TVERSION: this.TVERSION,
						TYPE: this.TYPE,//A.Android B.iPhone C.iPad
					},
					method:"POST",
					header: {
						'content-type':'application/x-www-form-urlencoded',
					},
					success: (res) => {
						uni.setStorageSync("SIGNATURE",res.data.OBJECT.SIGNATURE);
						this.loadData();
						this.loadspike();
						this.loadcarouselList();
						this.loadnews();
					}
				});
			}
			// this.loadpopular()
			// this.loadpop()
			// this.loadTime()
			uni.startPullDownRefresh();
			
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReady(){
			uni.hideLoading();
		},
		// watch: {
		// 	watchtitleList(newValue, oldValue) {
				
		// 	}
		// },
		// computed: {
		// 	watchtitleList() {
		// 		return this.titleList
		// 	}
		// },
		methods: {
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			
			async loadData() {
				// let carouselList = await this.$api.json('carouselList');
				// this.titleNViewBackground = carouselList[0].background;
				// this.swiperLength = carouselList.length;
				// this.carouselList = carouselList;
				let goodsList = await this.$api.json('goodsList');
				this.goodsList = goodsList || [];
				let brandList = await this.$api.json('brandList');
				this.brandList = brandList || [];
				//关闭下拉刷新
				uni.stopPullDownRefresh();
				uni.hideLoading();
			},
			loadspike(){
				//查询标题列表
				this.$http.post("/goods/exchangeList",{
					SIGNATURE : uni.getStorageSync("SIGNATURE"),
				}).then((e)=>{
					if(e.statusCode == 200 && e.data.STATE== '0'){
						e.data.OBJECT.map(item=>{
							this.$http.post("/goods/exchange",{
								SIGNATURE : uni.getStorageSync("SIGNATURE"),
								LID: item.ID,
							}).then((res)=>{
								if(res.statusCode == 200 && res.data.STATE== '0'){
									item.freshList=res.data.OBJECT;
								}
								this.titleList.push(item);
							}).catch((err1)=>{
								console.log("请求超时",err1);
							})
						})
					}
				}).catch((err)=>{
					console.log("请求超时",err);
				})
			},
			//加载轮播图
			async loadcarouselList(){
				this.$http.post("/ad/queryCarousel",{
					SIGNATURE : uni.getStorageSync("SIGNATURE"),
					PAGE:2,//1查询首页轮播图 2兑换页轮播图
				}).then((e)=>{
					
					this.carouselList=e.data.OBJECT;
					// this.titleNViewBackground = this.carouselList[0].background;
					this.swiperLength = this.carouselList.length;
				}).catch((err)=>{
					console.log("请求超时",err);
				})
			},
			//加载公告
			async loadnews(){
					//加载信息
				this.$http.post("/ad/querySystemNews",{
					SIGNATURE : uni.getStorageSync("SIGNATURE"),
					TYPE:1,
				}).then((e)=>{
					this.newsList = e.data.OBJECT
					console.log(this.newsList)
				}).catch((err)=>{
					console.log("请求超时",err);
				})
				
			},
			//消息详情页面
			navToNewsDetailPage(item){
				let id=item.ID;
				uni.navigateTo({
					url: '/pages/news/newsdetail?id='+id
				});
			},
			
			
			
			
			//加载   淘 优惠
			// async loadpop(id){
			// 	this.$http.post("/goods/exchange",{
			// 		SIGNATURE : uni.getStorageSync("SIGNATURE"),
			// 		LID: id
			// 	}).then((e)=>{
			// 		console.log("6666666",e);
			// 		if(e.statusCode == 200 && e.data.STATE== '0'){
			// 			this.popList =  e.data.OBJECT
			// 		}
			// 	}).catch((err)=>{
			// 		console.log("请求超时",err);
			// 	})
				
			// },
			//加载人气推荐
			// async loadpopular(id){
			// 	
			// 	
			// },
			// 
			
			
			
			
			// loadTime(){
			// 		if(new Date().getHours()%2 == 0){
			// 		this.time = new Date().getHours()/2 
			// 	}else{
			// 		this.time = Math.floor(new Date().getHours()/2)
			// 	}
			// 	var nextT = new Date().getFullYear()+'/'+(new Date().getMonth()+1)+'/'+new Date().getDate()+' '+(this.time*2+2)+':00:00'
			// 	var time1 = new Date(nextT).getTime()-new Date().getTime()
			// 	this.hour = Math.floor(time1/(1000*60*60))
			// 	this.minute = Math.floor(time1%(1000*60*60)/(1000*60))
			// 	this.second = Math.floor(time1%(1000*60*60)%(1000*60)/1000)
			// 	console.log(this.hour + '  ' +  this.minute  + ' ' +this.second)
			// },
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},
			//详情页
			navToDetailPage(item) {
				let id = item.ID;
				let sid = item.SID;
				uni.navigateTo({
					url: `/pages/product/productExchange?id=${id}&sid=${sid}`
				})
			},
			//轮播图详情页
			navToDetailPage1(item) {
				let id = item.GOODSID;
				let sid = item.SID;
				uni.navigateTo({
					url: `/pages/product/productExchange?id=${id}&sid=${sid}`
				})
			},
			
			//秒杀页
			// navToseckillPage(item){
			// 	uni.navigateTo({
			// 		url: '/pagesun/seckill/seckill?'
			// 	});
			// },
			//秒杀商品
			// navToDetailPagespike(item) {
				//测试数据没有写id，用title代替
				// console.log("/////////",item)
				// let id = item.ID;
				// uni.navigateTo({
				// 	url: `/pages/product/product1?id=${id}&spike=1`
				// })
			// },
			//新鲜好物页面
			navToNewproductPage(item,id){
				console.log("/////////",id)
				uni.navigateTo({
					url: '/pages/newproduct/newproductExchange?title='+item+'&labelId='+id
				});
			},
			//人气推荐页面
			// navToRenqituijianPage(){
			// 	uni.navigateTo({
			// 		url: '/pages/renqituijina/renqituijian'
			// 	});
			// },
		},
	}
</script>

<style lang="scss">
	/* #ifdef MP */
	.mp-search-box{
		position:absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;
		.ser-input{
			flex:1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color:$font-color-base;
			border-radius: 20px;
			background: rgba(255,255,255,.6);
		}
	}
	page{
		.cate-section{
			
			position:relative;
			z-index:5;
			border-radius:16upx 16upx 0 0;
			// margin-top:-20upx;
		}
		.carousel-section{
			padding: 0;
				
			width: 100%;
			.titleNview-placing {
				
				padding-top: 0;
				height: 0;
			}
			.titleNview-background{
				
			}
			.carousel{
				
				.carousel-item{
					
				}
			}
			.swiper-dots{
				
				left:45upx;
				bottom:40upx;
			}
		}
	}
	/* #endif */
	
	page {
		background: #f5f5f5;
	}
	.m-t{
		margin-top: 16upx;
	}
	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 0px;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transition: .4s;
		}
	}
	
	//动态文字
	.uni-swiper-msg{width:80%;height: 60upx; padding:12rpx 0; flex-wrap:nowrap; display:flex;margin-left: 60upx;position: relative;}
	.uni-swiper-msg-icon{width:50upx; margin-right:40upx;}
	.uni-swiper-msg-icon image{width:80%; flex-shrink:0;}
	.uni-swiper-msg swiper{width:90%; height:50upx;}
	.uni-swiper-msg swiper-item{line-height:50upx;}
	.un-yticon{
		font-size: 35upx;
		margin-bottom: 88upx;
		color: #FF0000;
	}
	.un-gun{
		width: 80%;
		font-size: 25upx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.un-xiang{
		    position: absolute;
			right: 0upx;
			top: 5upx;
			width: 44px;
			height: 45upx;
			background: inherit;
			background-color: rgba(255, 255, 255, 0);
			box-sizing: border-box;
			border-width: 1px;
			border-style: solid;
			border-color: #E02E24;
			border-radius: 3px;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
			font-family: '微软雅黑';
			font-weight: 404;
			font-style: normal;
			font-size: 11px;
			color: #E02E24;
			text-align: center;
			line-height: 40upx;
	}
	// 品牌分类
	.brand-section{
		display:flex;
		flex-wrap:wrap;
		padding: 0 50upx;
		background: #fff;
		.guess-item{
			position: relative;
			width: 48%;
			padding-bottom: 40upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
			.price{
				margin-top: 20upx;
				padding-bottom: 10upx;
			}
			.biaoqian{
				margin-left: 130upx;
				margin-bottom: 10upx;
			}
			
		}
		
		.image-wrapper{
			margin-top: 20upx;
			width: 300upx;
			height: 150upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		
		.title{
			font-size: 32upx;
			color: $font-color-dark;
			line-height: 40upx;
		}
		.title2{
			font-size: 24upx;
			line-height: 40upx;
		}
		.price{
			font-size: 28upx;
			color: #9D9D9D;
			line-height: 30upx;
		}
		.tit2{
			font-size: $font-sm;
			color: $font-color-light;
		}
		.m-price{
			// color: $font-color-light;
			text-decoration: line-through;
		}
	}
	
	.carousel {
		width: 100%;
		height: 375upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 0upx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 0upx;
		}
	}
	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}
	
	/* 分类 */
	.cate-section1 {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		padding: 40upx 22upx; 
		background: #fff;
		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm;
			color: $font-color-dark;
		}
		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 44upx;
			height: 44upx;
			margin-bottom: 14upx;
		}
	}
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		padding: 30upx 22upx; 
		background: #fff;
		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
		}
		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
			opacity: .7;
			box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}
	.ad-1{
		width: 100%;
		height: 210upx;
		padding: 10upx 0;
		background: #fff;
		image{
			width:100%;
			height: 100%; 
		}
	}
	
	/* 秒杀专区 */
	.seckill-section{
		display:flex;
		flex-wrap:wrap;
		padding: 4upx 50upx 24upx;
		background: #fff;
		.s-header{
			display:flex;
			align-items:center;
			height: 40upx;
			line-height: 1;
			.s-img{
				width: 140upx;
				height: 30upx;
			}
			.tip{
				font-size: $font-base;
				color: $font-color-light;
				margin: 0 20upx 0 40upx;
			}
			.timer{
				display:inline-block;
				width: 40upx;
				height: 36upx;
				text-align:center;
				line-height: 36upx;
				margin-right: 14upx;
				font-size: $font-sm+2upx;
				color: #fff;
				border-radius: 2px;
				background: rgba(0,0,0,.8);
			}
			.icon-you{
				font-size: $font-lg;
				color: $font-color-light;
				flex: 1;
				text-align: right;
			}
			.tit-box{
				flex: 1;
				display: flex;
				flex-direction: column;
			}
			.tit{
				font-size: $font-sm +2upx;
				color: $font-color-dark;
				line-height: 1.3;
			}
			.tit2{
				font-size: $font-sm;
				color: $font-color-light;
			}
			.un-you{
				padding-left: 360upx;
			}
			.un-you2{
				padding-left: 240upx;
				
			}
			
		}
		
		.un-seckill-section{
			display:flex;
			flex-wrap:wrap;
			padding: 20upx 0upx 20upx 0upx;
			background: #fff;
			
			.guess-item{
				width: 48%;
				padding-bottom: 40upx;
				&:nth-child(2n+1){
					margin-right: 4%;
				}
				.price{
					margin-top: 20upx;
					padding-bottom: 10upx;
				}
				.biaoqian{
					margin-left: 130upx;
					margin-bottom: 10upx;
				}
				.un-hongyuan{
					z-index: 1;
					position: absolute; 
					margin-left: 205upx;
					top: -30upx;
					width: 80upx;
					height:80upx;
					background: inherit;
					background-color: rgba(240, 72, 68, 1);
					border: none;
					border-radius: 58upx;
					-moz-box-shadow: none;
					-webkit-box-shadow: none;
					box-shadow: none;
					font-family: '微软雅黑';
					font-style: normal;
					color: #FFFFFF;
					line-height: 75upx;
				}
			}
			
			.image-wrapper{
				margin-top: 30upx;
				margin-left: 75upx;
				width: 160upx;
				height: 160upx;
				border-radius: 3px;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
					opacity: 1;
				}
			}
			
			.title{
				margin-left: 30upx;
				margin-right: 30upx;
				font-size: 25upx;
				color: $font-color-dark;
				line-height: 40upx;
				text-align: center;
			}
			.title2{
				margin-left: 30upx;
				margin-right: 30upx;
				font-size: 24upx;
				line-height: 40upx;
				text-align: center;
			}
			.price{
				color:$uni-color-primary;
				font-size: 28upx;
				margin-left: 80upx;
				line-height: 50upx;
				
			}
			
			.tit2{
				font-size: $font-sm;
				color: $font-color-light;
			}
			
			
		}
		
	}
	
	/* 新鲜好物 */
	.new-section{
		padding: 4upx 50upx 24upx;
		background: #fff;
		.s-header{
			display:flex;
			align-items:center;
			height: 92upx;
			line-height: 1;
			.s-img{
				width: 140upx;
				height: 30upx;
			}
			.tip{
				font-size: $font-base;
				color: $font-color-light;
				margin: 0 20upx 0 40upx;
			}
			.icon-you{
				font-size: $font-lg;
				color: $font-color-light;
				flex: 1;
				text-align: right;
			}
			.tit-box{
				flex: 1;
				display: flex;
				flex-direction: column;
			}
			.tit{
				font-size: $font-sm +2upx;
				color: $font-color-dark;
				line-height: 1.3;
				
			}
			.tit2{
				font-size: $font-sm;
				color: $font-color-light;
				
			}
			
		}
		.m-price{
			text-decoration: line-through;
			font-family: '微软雅黑';
			font-style: normal;
			color: #FFFFFF;
			font-weight: 900;
		}
		.floor-list{
			white-space: nowrap;
			
		}
		.scoll-wrapper{
			display:flex;
			align-items: flex-start;
		}
		.floor-item{
			width: 250upx;
			margin-right: 20upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			line-height: 1.8;
			image{
				margin-top: 15upx;
				width: 160upx;
				height: 160upx;
				border-radius: 6upx;
			}
			.price{
				color: $uni-color-primary;
			}
			.title{
				width: 85%;
			}
			.tit2{
				font-size: $font-sm;
				color: $font-color-light;
				width: 85%;
			}
			.title2{
				font-size: 25upx;
				line-height: 40upx;
			}
			
			
		}
		.more{
			display:flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			flex-shrink: 0;
			width: 180upx;
			height: 180upx;
			border-radius: 6upx;
			background: #f3f3f3;
			font-size: $font-base;
			color: $font-color-light;
			text:first-child{
				margin-bottom: 4upx;
			}
		}
	}
	.f-header{
		display:flex;
		align-items:center;
		height: 140upx;
		padding: 6upx 50upx 8upx;
		background: #fff;
		image{
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			margin-right: 20upx;
		}
		.tit-box{
			flex: 1;
			display: flex;
			flex-direction: column;
		}
		.tit{
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 1.3;
		}
		.tit2{
			font-size: $font-sm;
			color: $font-color-light;
		}
		
		.icon-you{
			font-size: $font-lg +2upx;
			color: $font-color-light;
		}
		
	}
	.empty{
		
		width: 100%;
		padding-bottom:50upx;
		display:flex;
		justify-content: center;
		flex-direction: column;
		align-items:center;
		background: #fff;
		image{
			width: 240upx;
			height: 160upx;
			margin-bottom:30upx;
		}
		.empty-tips{
			font-size: $font-sm+2upx;
			color: $font-color-disabled;
		}
	}
	
	/* 人气推荐 */
	.group-section{
		padding: 0upx 50upx;
		background: #fff;
		.g-swiper{
			height: 650upx;
			padding-bottom: 30upx;
		}
		.g-swiper-item{
			width: 100%;
			padding: 0upx;
			display:flex;
		}
		image{
			width: 100%;
			height: 460upx;
			border-radius: 4px;
		}
		.g-item{
			display:flex;
			flex-direction: column;
			overflow:hidden;
		}
		.left{
			flex: 1.2;
			margin-right: 24upx;
			.t-box{
				padding-top: 20upx;
			}
		}
		.right{
			flex: 0.8;
			flex-direction: column-reverse;
			.t-box{
				padding-bottom: 20upx;
			}
		}
		.t-box{
			
			font-size: 25upx;
			color: $font-color-dark;
			line-height: 1.6;
		}
		.price{
			color:$uni-color-primary;
		}
		.m-price{
			font-size: $font-sm+2upx;
			text-decoration: line-through;
			color: $font-color-light;
			margin-left: 8upx;
		}
		.pro-box{
			display:flex;
			align-items:center;
			margin-top: 10upx;
			font-size: $font-sm;
			color: $font-base;
			padding-right: 10upx;
		}
		.progress-box{
			flex: 1;
			border-radius: 10px;
			overflow: hidden;
			margin-right: 8upx;
		}
	}

	/* 专题精选 */
	.zhuan-section{
		background: #fff;
		padding: 0upx 50upx;
		.g-swiper{
			height: 500upx;
			padding-bottom: 30upx;
		}
		
		.g-swiper-item{
			width: 100%;
			padding: 0upx;
			display:flex;
			.g-item{
				width: 100%;
				display:flex;
				flex-direction: column;
				overflow:hidden;
				.un-image{
					width: 100%;
					height: 300upx;
					image{
						max-width: 100%;
						max-height: 100%;
						border-radius: 4px;
					}
				}
			}
		}
		
		.un-clamp {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.left{
			flex: 1.2;
			margin-right: 24upx;
			.t-box{
				padding-top: 20upx;
			}
		}
		.right{
			flex: 0.8;
			flex-direction: column-reverse;
			padding-right: 10upx;
			float: right;
		}
		.t-box{
			width: 100%;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 1.6;
		}
		.col-4{
			width:100%;
			height:80upx;
			line-height: 80upx;
			box-sizing:border-box;/*怪异盒子模型*/
		}
		
		.tit2{
			width: 100%;
			font-size: $font-sm;
			color: $font-color-light;
		}
		.price{
			color:$uni-color-primary;
		}
		.m-price{
			font-size: $font-sm+2upx;
			text-decoration: line-through;
			color: $font-color-light;
			margin-left: 8upx;
		}
		.pro-box{
			display:flex;
			align-items:center;
			margin-top: 10upx;
			font-size: $font-sm;
			color: $font-base;
			padding-right: 10upx;
		}
		.progress-box{
			flex: 1;
			border-radius: 10px;
			overflow: hidden;
			margin-right: 8upx;
		}
	}
	
	/* 猜你喜欢 */
	.guess-section{
		display:flex;
		flex-wrap:wrap;
		padding: 0 50upx;
		background: #fff;
		.guess-item{
			
			display:flex;
			flex-direction: column;
			width: 45%;
			padding-bottom: 40upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			margin-left: 85upx;
			width: 160upx;
			height: 160upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			margin-left: 40upx;
			font-size: $font-sm+1upx;
			color: $font-color-dark;
			line-height: 60upx;
			text-align: center;
			
		}
		
		.price{
			margin-left: 115upx;
			font-size: $font-sm;
			color: $uni-color-primary;
			line-height: 1;
			line-height: 50upx;
		}
		.tit2{
			margin-left: 40upx;
			font-size: $font-sm;
			color: $font-color-light;
			line-height: 30upx;
			text-align: center;
		}
	}
	.iconfont1{
		margin-left: 8upx;
		color: $font-color-light;
		font-weight: 900;
		font-size: 27upx;
	}
	
	/*黄椭圆*/
	.un-huangtuoyuan{
		z-index: 1;
		position: absolute;
		top: 0upx;
		left: 100upx;
		width: 90upx;
		height: 35upx;
		background: inherit;
		background-color: rgba(241, 151, 54, 1);
		box-sizing: border-box;
		border-width: 1upx;
		border-style: solid;
		border-color: rgba(241, 151, 54, 1);
		border-radius: 42upx;
		border-bottom-left-radius: 0upx;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		font-family: '微软雅黑';
		font-weight: 404;
		font-style: normal;
		font-size: 22upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 31upx
	}
	.un-left{
		position: relative;
		margin-left: 20upx;
	}
	.un-zanwu{
		font-size: 25upx;
		color: #999999;
		text-align: center;
	}
</style>
